import { Icon } from "@iconify/react";
import { Card } from "antd";
import { useSelector } from "react-redux";
import styled from "styled-components";

const Styled = styled.div`
  margin-top: 6.25rem;
  margin-bottom: 6.25rem;
  .animate-bang {
    animation: bang 0.8s linear infinite;
  }

  @keyframes bang {
    0%,
    100% {
      transform: scale(1.1);
    }
    50% {
      transform: scale(0.9);
    }
  }
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 2.5rem;
    font-size: 4.5rem;
    span {
      margin-left: 1.75rem;
    }
  }
`;

const Announcement = () => {
  const {
    blogInfo: { blog_config },
  } = useSelector((state) => state.app);
  return (
    <Styled className="animate-zoom-in ">
      <Card style={{ minWidth: 300 }} hoverable>
        <p className="title">
          <Icon className="animate-bang " icon="fluent-emoji-flat:bell" />
          <span>公告</span>
        </p>
        <div>{blog_config?.website_notice}</div>
      </Card>
    </Styled>
  );
};

export default Announcement;
